<template>
  <div class="execution">
        <basic-container>
            <style-page
                :showTabsRight='false'
                :showTabsHeard='true'
            >
                <template slot="buttons">
                    <el-button @click.stop='handerAsync' type="primary">保存</el-button>
                </template>

                <template slot="tabs">
                    <el-tabs v-model="activeName">
                        <el-tab-pane label="基本资料" name="first">
                            <el-form :model="ruleForm" ref="ruleForm">
                                <el-card class="box-card">
                                    <div slot="header" class="clearfix">
                                        <span>基本信息</span>
                                    </div>
                                    <div class="formitem">
                                        <div class="itembox">
                                            <aside>商机标题</aside>
                                            <el-form-item style="width:80%" prop="busName">
                                                <el-input v-model="ruleForm.busName"></el-input>
                                            </el-form-item>
                                        </div>
                                        <div class="itembox">
                                            <aside>客户名称</aside>
                                            <el-form-item style="width:80%" prop="custName">
                                                <el-input v-model="ruleForm.custName"></el-input>
                                            </el-form-item>
                                        </div>
                                        <div class="itembox">
                                            <aside>当前商机状态</aside>
                                            <el-form-item style="width:80%" prop="busStatus">
                                                <el-select v-model="ruleForm.busStatus">
                                                    <el-option label="新商机" :value='1'>新商机</el-option>
                                                    <el-option label="正在试用" :value='2'>正在试用</el-option>
                                                    <el-option label="试用结束" :value="3">试用结束</el-option>
                                                    <el-option label="初步接洽" :value="4">初步接洽</el-option>
                                                    <el-option label="方案/报价" :value="5">方案/报价</el-option>
                                                    <el-option label="谈判/合同" :value="6">谈判/合同</el-option>
                                                    <el-option label="赢单" :value="7">赢单</el-option>
                                                    <el-option label="输单" :value="8">输单</el-option>
                                                </el-select>
                                            </el-form-item>
                                        </div>
                                        <div class="itembox">
                                            <aside>预算金额：</aside>
                                            <el-form-item style="width:80%" prop="busAmount">
                                                <el-input v-model="ruleForm.busAmount"></el-input>
                                            </el-form-item>
                                        </div>
                                        <div class="itembox">
                                            <aside>商机开始跟进时间</aside>
                                            <el-form-item style="width:80%" prop="startTime">
                                                <el-date-picker
                                                    v-model="ruleForm.startTime"
                                                    type="datetime"
                                                    placeholder="选择日期时间"
                                                    format="yyyy 年 MM 月 dd 日 HH:mm:ss"
                                                    value-format="yyyy-MM-dd HH:mm:ss">
                                                </el-date-picker>
                                            </el-form-item>
                                        </div>
                                        <div class="itembox">
                                            <aside>商机预计结束日期</aside>
                                            <el-form-item style="width:80%" prop="endTime">
                                                <el-date-picker
                                                    v-model="ruleForm.endTime"
                                                    type="datetime"
                                                    placeholder="选择日期时间"
                                                    format="yyyy 年 MM 月 dd 日 HH:mm:ss"
                                                    value-format="yyyy-MM-dd HH:mm:ss">
                                                </el-date-picker>
                                            </el-form-item>
                                        </div>
                                        <div class="itembottombox">
                                            <aside>备注类字段：</aside>
                                            <el-form-item prop="remark">
                                                <el-input v-model="ruleForm.remark"></el-input>
                                            </el-form-item>
                                        </div>
                                    </div>
                                </el-card>
                                <el-card class="box-card">
                                    <div slot="header" class="clearfix">
                                        <span>其他信息</span>
                                    </div>
                                    <div class="formitem">
                                        <div class="itembox">
                                            <aside>商机来源</aside>
                                            <el-form-item style="width:80%" prop="busFrom">
                                                <el-select v-model="ruleForm.busFrom">
                                                    <el-option label="新商机" :value='1'>新商机</el-option>
                                                    <el-option label="线索转商机" :value='2'>线索转商机</el-option>
                                                </el-select>
                                            </el-form-item>
                                        </div>
                                        <div class="itembox">
                                            <aside>商机获取日期 </aside>
                                            <el-form-item style="width:80%" prop="busFromDate">
                                                <el-date-picker
                                                    v-model="ruleForm.busFromDate"
                                                    type="datetime"
                                                    placeholder="选择日期"
                                                    format="yyyy 年 MM 月 dd 日 HH:mm:ss"
                                                    value-format="yyyy-MM-dd HH:mm:ss">
                                                </el-date-picker>
                                            </el-form-item>
                                        </div>
                                        <div class="itembox">
                                            <aside>下次跟进时间</aside>
                                            <el-form-item style="width:80%" prop="nextFollowTime">
                                                <el-date-picker
                                                    v-model="ruleForm.nextFollowTime"
                                                    type="datetime"
                                                    placeholder="选择日期时间"
                                                    format="yyyy 年 MM 月 dd 日 HH:mm:ss"
                                                    value-format="yyyy-MM-dd HH:mm:ss">
                                                </el-date-picker>
                                            </el-form-item>
                                        </div>
                                    </div>
                                </el-card>
                                <el-card class="box-card">
                                    <div slot="header" class="clearfix">
                                        <span>跟进人信息</span>
                                    </div>
                                    <div class="formitem" style="margin-bottom:10px">
                                        <div class="itembox">
                                            <aside>负责人</aside>
                                            <el-form-item style="width:80%" prop="busChargePerson">
                                                <el-input v-model="ruleForm.busChargePerson"></el-input>
                                            </el-form-item>
                                        </div>
                                        <div class="itembox">
                                            <aside>创建人</aside>
                                            <el-form-item style="width:80%" prop="createName">
                                                <el-input disabled v-model="ruleForm.createName"></el-input>
                                            </el-form-item>
                                        </div>
                                        <div class="itembox">
                                            <aside>协助人</aside>
                                            <el-form-item style="width:80%" prop="busAssistPerson">
                                                <el-input v-model="ruleForm.busAssistPerson"></el-input>
                                            </el-form-item>
                                        </div>
                                    </div>
                                </el-card>
                            </el-form>
                        </el-tab-pane>
                        <el-tab-pane v-if="showTabs" label="客户联系人" name="second">
                            <omscustomerlink />
                        </el-tab-pane>
                        <el-tab-pane v-if="showTabs" label="合同文件" name="third">
                            <omscustomercontract />
                        </el-tab-pane>
                        <!-- <el-tab-pane label="关联附件" name="six">
                            <omsbusinessattach />
                        </el-tab-pane> -->
                    </el-tabs>
                </template>
            </style-page>

        </basic-container>
    </div>
</template>

<script>
import omscustomerlink from '@/views/saas-business/omscustomerlink/views/omscustomerlink/index.vue'
import omsbusinessattach from '@/views/saas-business/omsbusinessattach/views/omsbusinessattach/index.vue'
import omscustomercontract from '@/views/saas-business/omscustomercontract/views/omscustomercontract/index.vue'
import {addObj,getObj,putObj} from '@/views/saas-business/omsbusinessAdd/api/omsbusiness.js'
export default {
    
    data(){
        return{
            ruleForm: {
                busName:'',
                custName: '',
                busStatus:1,
                busAmount:'',
                startTime:'',
                endTime:'',
                remark: '',
                busFrom:2,
                busFromDate:'',
                nextFollowTime:'',
                busChargePerson:'',
                createName:(JSON.parse((JSON.parse(localStorage.getItem('dbl-user'))).content)).realName,
                busAssistPerson:'',
            },
            rules: {
                name: [
                    { required: true, message: '请输入活动名称', trigger: 'blur' },
                    { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
                ],
                normalAmount: [
                    { required: true, message: '请选择活动区域', trigger: 'change' }
                ],
                budgetAmount: [
                    { required: true, message: '请选择日期', trigger: 'change' }
                ],
                saleAmount: [
                    { required: true, message: '请选择时间', trigger: 'change' }
                ],
                unitAmount: [
                    { required: true, message: '请选择时间', trigger: 'change' }
                ],
                type: [
                    { type: 'array', required: true, message: '请至少选择一个活动性质', trigger: 'change' }
                ],
                resource: [
                    { required: true, message: '请选择活动资源', trigger: 'change' }
                ],
                remark: [
                    { required: true, message: '请填写活动形式', trigger: 'blur' }
                ]
            },
            activeName:'first',
            showTabs:true,
        }
    },
    components:{
        omscustomerlink,
        omsbusinessattach,
        omscustomercontract,
    },
    created(){
        let urlId = this.$router.history.current.params.id
        if(urlId){
            this.showTabs = true
            getObj(urlId).then(res => {
                console.log(res.data.data);
                this.ruleForm = res.data.data
            })
        }else{
            this.showTabs = false
        }
    },
    mounted(){
        
    },
    methods:{
        // 保存按钮
        handerAsync(){
            let urlId = this.$router.history.current.params.id
            console.log(urlId);
            if(urlId){
                let obj = Object.assign(this.ruleForm,{clueId:urlId})
                putObj(obj).then(res => {
                    console.log(res);
                    this.$router.push({name:'omsbusiness'})
                })
            }else{
                putObj(this.ruleForm).then(res => {
                    console.log(res);
                    this.$router.push({name:'omsbusiness'})
                })
            }
        },
        addProductClick(){
            this.getList()
            this.centerDialogVisible = true
        },
        treeCheck(targer,select){
            console.log(targer,select);
            this.selectData = select.checkedNodes
        },
        treeCheckChange(targer,select,selectList){
            console.log(targer,select,selectList);
        },
        handerAdd(){
            console.log(this.selectData);
            let arr = []
            this.selectData.map(e => {
                if(e.children && e.children.length === 0){
                    arr.push(e)
                }
            })
            this.menuList = arr
            this.checkedKeys = arr.map( e => e.id)
            console.log(this.checkedKeys);
            this.centerDialogVisible = false
        },
        filterNode(value, data) {
            if (!value) return true
            return data.label.indexOf(value) !== -1
        },
        getList() {
        },
        handleDelete(row){
            console.log("🚀 ~ file: index.vue ~ line 214 ~ handleDelete ~ row", this.checkedKeys)
            const _this = this;
            this.$confirm('是否确认删除名称为"' + row.name + '"的数据项?', "警告", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            }).then(function () {
                const index = _this.menuList.findIndex( e => e.id === row.id)
                _this.menuList.splice(index,1)
                _this.checkedKeys = _this.menuList.map( e => e.id)
                console.log(_this.checkedKeys);
                _this.menuList = _this.menuList
            })
        }
    }
}
</script>

<style scoped lang='scss'>
.execution {
    .basic-container {
        padding-top: 10px;
    }
}
</style>